<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom元素</title>
  </head>
  <body>
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
    <script>
      // 1. 查找单个元素
      const divDom = document.querySelector("div");
      // 1.1 打印， dom对象， 建议用console.dir
      console.dir(divDom);
      // 1.2 修改元素 -> 修改完成后页面更新 - 这里通过代码实现， 鸿蒙是通过数据驱动视图更新
      setTimeout(() => {
        divDom.innerHTML = "我要打🏀";
      }, 3000);

      // 2. 查找多个元素
      const divArr = document.querySelectorAll("div");
      // 2.1 divArr有foreach，length 方法
      //     但没有fiter、map、push等其他数组方法
      //     所以称之为为数组， 可通过下标取值
      setTimeout(() => {
        divArr.forEach((item) => (item.innerHTML = "小黑子"));
      }, 8000);
    </script>
  </body>
</html>
